<template>
    <view class="body">
        <view class="slogan">找回密码</view>
        <view>
            <template v-if="step === 1">
                <wd-input placeholder="请输入手机号" prefix-icon="mobile" :maxlength="11" border="bottom" v-model="phone" clearable></wd-input>

                <view class="margin-top-30">
                    <wd-input placeholder="请输入验证码" border="bottom" v-model="code" prefix-icon="mail" use-suffix-slot>
                        <template #suffix>
                            <text @tap="getCode" class="font-28" :class="second === 0 ? 'color-main' : 'color-999'">{{ tips }}</text>
                        </template>
                    </wd-input>
                </view>
            </template>
            <template v-else-if="step === 2">
                <wd-input @blur="validatePassword" custom-class="margin-top-30" placeholder="请输入密码" prefix-icon="eye-close" type="password" border="bottom" v-model="password" clearable></wd-input>

                <wd-input @blur="validatePassword" custom-class="margin-top-30" placeholder="再次确认密码" prefix-icon="eye-close" type="password" border="bottom" v-model="passwordConfirm" clearable></wd-input>
            </template>
            <wd-button @click="submit" custom-class="margin-top-60" type="primary" block>下一步</wd-button>
            <view class="margin-top-30 flex justify-center">
                <text @click="toLogin" class="btn-text">返回登录</text>
            </view>
        </view>

        <!--  滑块验证器  -->
        <verify-slider :verifyCodeType="verifyCodeType.FIND_PASSWORD" @success="verifySuccess" @close="showVerify = false" v-if="showVerify"> </verify-slider>
    </view>
</template>

<script setup lang="ts">
import { verifyCodeType } from '@/data/enums/verifyCodeType';
import { computed, ref } from 'vue';
import route from '@/util/route';
import { $test, $toast } from '@/util/common';
import $apiLogin from '@/api/login';

const showVerify = ref(false);
const step = ref(1);
const randomKey = ref();
const securityCode = ref();
const phone = ref();
const password = ref();
const passwordConfirm = ref();
const code = ref();
const second = ref(0);
let timeout: any;
const tips = computed(() => {
    if (second.value === 0) return '获取验证码';
    return second.value + '秒后重新获取';
});

function submit() {
    if (step.value === 1) {
        $apiLogin
            .checkVerifyCode({
                telephone: phone.value,
                smsVerifyCode: code.value,
                verifyCodeType: verifyCodeType.FIND_PASSWORD,
            })
            .then(({ data }) => {
                if (data === 3 || data === 1) {
                    $toast.fail('验证码错误');
                } else if (data === 2) {
                    $toast.fail('验证码已过期');
                } else {
                    step.value++;
                }
            });
    } else if (step.value === 2) {
        if (validatePassword(password) && validatePassword(passwordConfirm)) {
            if (password.value !== passwordConfirm.value) return $toast.info('密码不一致');
            updatePwd();
        }
    }
}
function verifySuccess(e: any) {
    showVerify.value = false;
    securityCode.value = e.securityCode;
    randomKey.value = e.randomKey;
    getCode();
}
//获取短信验证码
function getCode() {
    if (!validatePhone()) return;
    if ($test.empty(securityCode.value)) return (showVerify.value = true);
    $apiLogin
        .sendVerifyCode({
            telephone: phone.value,
            templateCode: 'SMS_VERIFY_CODE',
            verifyCodeType: verifyCodeType.FIND_PASSWORD,
            securityCode: securityCode.value,
            key: randomKey.value,
            validateFlag: 'slide',
        })
        .then(({ data }) => {
            $toast.success('验证码已发送');
            second.value = 60;
            timeout = setInterval(() => {
                second.value--;
                if (second.value <= 0) {
                    clearInterval(timeout);
                }
            }, 1000);
        })
        .catch((e) => {
            securityCode.value = '';
            randomKey.value = '';
        });
}

function toLogin() {
    route({
        type: 'reLaunch',
        url: '/pages/login/login',
    });
}
function updatePwd() {
    $apiLogin
        .findPwd({
            smsVerifyCode: code.value,
            uid: phone.value,
            newPwd: password.value,
        })
        .then(({ data }) => {
            $toast.success('密码修改成功');
            toLogin();
        });
}
function validateCode() {
    if ($test.empty(code.value)) {
        $toast.fail('请输入验证码');
        return false;
    }
    return true;
}
function validatePhone() {
    if ($test.empty(phone.value)) {
        $toast.fail('请输入手机号');
        return false;
    }
    if (!/^1[345789]\d{9}$/.test(phone.value)) {
        $toast.fail('手机格式错误');
        return false;
    }
    return true;
}
function validatePassword(e: any) {
    console.log(e);
    const reg = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,}$/;
    if ($test.empty(e.value)) {
        $toast.info('请输入密码');
        return false;
    }
    if (!reg.test(e.value)) {
        $toast.info('含字母、数字、字符3种组合大于8个字符');
        return false;
    }
    return true;
}
</script>

<style lang="scss" scoped>
.body {
    padding: 30rpx 60rpx;
    background: #fff;
}

.slogan {
    color: #333;
    font-size: 40rpx;
    font-weight: bold;
    line-height: 250rpx;
}

.btn-text {
    font-size: 24rpx;
    line-height: 50rpx;
    color: $-color-theme;
}

.img-code {
    height: 48rpx;
    width: 120rpx;
}
</style>
